<template>
    <div>
        <p class="hloading"></p>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.hloading{
    width: 74px;
    height: 30px;
    position: fixed;
    top:50%;
    left: 50%;
    margin: -15px 0 0 -37px;
    z-index: 2;
}
.hloading::before{
    content: "";
    position: absolute;
    left: 0;
    top:5px;
    z-index: 2;
    width: 48px;
    height: 30px;
    background: url("/static/img/loading1.png");
    background-size: 48px 30px;
    animation: hbload 2s infinite;
}
.hloading::after{
    content: "";
    position: absolute;
    left: 45px;
    top:0;
    z-index: 2;
    width: 29px;
    height: 19px;
    background: url("/static/img/loading2.png");
    background-size: 29px 19px;
    animation: haload 2s infinite;
}
@keyframes hbload{
    0%{
        transform: translateX(-30%);
    }
    50%{
        transform: translateX(50%);
    }
    100%{
        transform: translateX(-30%);
    }
}
@keyframes haload{
    0%{
        transform: translateX(30%);
    }
    50%{
        transform: translateX(-50%);
    }
    100%{
        transform: translateX(30%);
    }
}
</style>